```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitDiagram：让你的GitHub项目可视化</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --light: #f8f9fa;
            --dark: #212529;
            --text-primary: #2b2d42;
            --text-secondary: #8d99ae;
        }
        
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: var(--text-primary);
            line-height: 1.6;
            background-color: #f9fafb;
        }
        
        .hero-section {
            background: linear-gradient(135deg, rgba(67, 97, 238, 0.9) 0%, rgba(63, 55, 201, 0.9) 100%);
            position: relative;
            overflow: hidden;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .hero-bg-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
            background-size: 30px 30px;
            z-index: 1;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--accent);
        }
        
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            overflow: hidden;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        
        .code-block {
            background-color: #2d3748;
            border-radius: 8px;
            position: relative;
        }
        
        .code-block pre {
            margin: 0;
            padding: 1.5rem;
            overflow-x: auto;
        }
        
        .code-block .language-label {
            position: absolute;
            top: 0;
            right: 0;
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            padding: 0.25rem 0.75rem;
            border-bottom-left-radius: 8px;
            font-size: 0.75rem;
            font-family: monospace;
        }
        
        .comparison-table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .comparison-table th {
            background-color: var(--primary);
            color: white;
            text-align: left;
        }
        
        .comparison-table td, .comparison-table th {
            padding: 12px 16px;
            border: 1px solid #e2e8f0;
        }
        
        .comparison-table tr:nth-child(even) {
            background-color: #f8fafc;
        }
        
        .comparison-table tr:hover {
            background-color: #edf2f7;
        }
        
        .check-icon {
            color: #10b981;
        }
        
        .x-icon {
            color: #ef4444;
        }
        
        .drop-cap::first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.65;
            margin: 0.1em 0.2em 0.1em 0;
            color: var(--primary);
            font-weight: 700;
        }
        
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted var(--text-secondary);
        }
        
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 220px;
            background-color: var(--dark);
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.875rem;
        }
        
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem !important;
            }
            
            .hero-subtitle {
                font-size: 1.25rem !important;
            }
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-section py-20 text-white">
        <div class="hero-bg-pattern"></div>
        <div class="container mx-auto px-6 hero-content">
            <div class="max-w-4xl mx-auto text-center">
                <div class="inline-block mb-6 px-4 py-2 bg-white bg-opacity-20 rounded-full backdrop-filter backdrop-blur-sm">
                    <span class="text-sm font-medium">开发者工具</span>
                </div>
                <h1 class="hero-title text-5xl font-bold mb-6 leading-tight">GitDiagram <span class="text-yellow-300">可视化你的GitHub项目</span></h1>
                <p class="hero-subtitle text-xl mb-10 max-w-3xl mx-auto opacity-90">瞬间理解复杂代码结构，加速团队协作与项目交接</p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="#try-it" class="px-8 py-3 bg-white text-primary font-semibold rounded-lg shadow-md hover:bg-opacity-90 transition duration-300 transform hover:-translate-y-1">
                        立即尝试 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                    <a href="#how-it-works" class="px-8 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300">
                        了解原理 <i class="fas fa-book-open ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <p class="drop-cap mb-8 text-lg text-gray-700 leading-relaxed">
                    在复杂的软件项目中，理解代码结构往往是新团队成员面临的第一道难题。当项目文件夹嵌套层级过多，依赖关系错综复杂时，即使是经验丰富的开发者也会感到头疼。
                </p>
                <div class="my-10">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1751872373056-0a167210-41df-4f32-9e90-cabe14e2e920.png" alt="GitDiagram示例" class="w-full rounded-xl shadow-xl border border-gray-200">
                </div>
                <p class="text-lg text-gray-700 leading-relaxed mb-8">
                    而GitDiagram这款工具恰好解决了这一痛点——只需将GitHub链接中的"hub"替换为"diagram"，便能立即生成一个直观的项目结构图。这不仅帮助开发者快速熟悉项目，还为技术分享和团队协作提供了绝佳的可视化工具。想象一下，当你向团队或客户展示项目时，不再需要繁琐的文字描述，而是通过一张清晰的交互式图表，让所有人瞬间理解项目架构的美妙之处。
                </p>
            </div>
        </div>
    </section>

    <!-- Background Section -->
    <section class="py-16 bg-gray-50" id="background">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-3xl font-bold mb-12 text-center">一、GitDiagram的诞生背景</h2>
            
            <div class="max-w-4xl mx-auto">
                <!-- Card 1 -->
                <div class="card bg-white p-8 mb-8">
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <span class="mr-3 text-primary">1.</span> 代码可视化的重要性
                    </h3>
                    <p class="text-gray-700 mb-6">
                        代码可视化不仅仅是一种展示方式，更是理解复杂系统的有效工具。研究表明，人类大脑处理视觉信息的速度比文本快60,000倍。在软件开发领域，可视化能够帮助开发者迅速把握项目全局，识别模块间的依赖关系，发现潜在的架构问题。
                    </p>
                    <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-primary">
                        <p class="text-gray-700 italic">
                            <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> 视觉化处理让开发者在几分钟内就能获得通常需要数小时阅读代码才能理解的系统结构。
                        </p>
                    </div>
                </div>
                
                <!-- Card 2 -->
                <div class="card bg-white p-8 mb-8">
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <span class="mr-3 text-primary">2.</span> 传统代码结构展示方式的局限
                    </h3>
                    <p class="text-gray-700 mb-6">
                        传统展示代码结构的方式通常依赖于文件树或文档描述，这些方法存在明显局限：
                    </p>
                    <div class="code-block mb-6">
                        <span class="language-label">文件树示例</span>
                        <pre class="text-gray-300"><code>project/
├── src/
│   ├── components/
│   │   ├── Button.ts
│   │   └── Input.ts
│   ├── utils/
│   │   └── helpers.ts
│   └── index.ts
├── tests/
│   └── components/
│       ├── Button.test.ts
│       └── Input.test.ts
└── package.json</code></pre>
                    </div>
                    <p class="text-gray-700">
                        这种展示方式虽然直观，但无法反映文件间的依赖关系和调用逻辑，更无法展示项目的演化历史。
                    </p>
                </div>
                
                <!-- Card 3 -->
                <div class="card bg-white p-8">
                    <h3 class="text-2xl font-bold mb-4 flex items-center">
                        <span class="mr-3 text-primary">3.</span> GitDiagram的开发初衷
                    </h3>
                    <div class="flex flex-col md:flex-row gap-8">
                        <div class="flex-1">
                            <p class="text-gray-700 mb-6">
                                GitDiagram由Ahmed Khaleel开发，其初衷是解决开发者在理解大型代码库时面临的困境。作为一名开发者，Khaleel意识到快速理解项目结构对提高开发效率至关重要，尤其是在接手新项目或参与开源贡献时。
                            </p>
                            <p class="text-gray-700">
                                通过自动化的代码结构分析和可视化，GitDiagram帮助开发者节省宝贵时间，让他们能够专注于实际的开发工作，而不是花费大量精力去理解复杂的代码组织。
                            </p>
                        </div>
                        <div class="flex-1 bg-gray-100 rounded-lg p-6 flex items-center justify-center">
                            <div class="text-center">
                                <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-lightbulb text-white text-3xl"></i>
                                </div>
                                <p class="font-semibold text-gray-700">"好的可视化应该像一面镜子，清晰地反映出代码的本质结构"</p>
                                <p class="text-sm text-gray-500 mt-2">- Ahmed Khaleel, GitDiagram创始人</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section class="py-16 bg-white" id="how-it-works">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-3xl font-bold mb-12 text-center">二、GitDiagram的工作原理</h2>
            
            <div class="max-w-4xl mx-auto">
                <!-- Step 1 -->
                <div class="mb-16">
                    <div class="flex flex-col md:flex-row gap-8 items-center">
                        <div class="md:w-1/3">
                            <div class="feature-icon bg-primary bg-opacity-10 text-primary mx-auto md:mx-0">
                                <i class="fas fa-code-branch text-2xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-3 text-center md:text-left">1. 解析GitHub仓库结构</h3>
                            <p class="text-gray-600 text-center md:text-left">
                                GitDiagram通过GitHub API获取仓库的完整结构信息，包括文件层次、提交历史和分支信息。
                            </p>
                        </div>
                        <div class="md:w-2/3">
                            <div class="code-block">
                                <span class="language-label">TypeScript</span>
                                <pre class="text-gray-300"><code>async function parseRepository(repoUrl: string): Promise&lt;RepoStructure&gt; {
  const repoData = await fetchRepoData(repoUrl);
  const structure: RepoStructure = {
    nodes: [],
    edges: []
  };
  
  // 递归解析文件结构
  await parseDirectory(repoData.rootDir, structure);
  
  // 分析文件间依赖关系
  await analyzeDependencies(structure);
  
  return structure;
}</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Step 2 -->
                <div class="mb-16">
                    <div class="flex flex-col md:flex-row-reverse gap-8 items-center">
                        <div class="md:w-1/3">
                            <div class="feature-icon bg-primary bg-opacity-10 text-primary mx-auto md:mx-0">
                                <i class="fas fa-project-diagram text-2xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-3 text-center md:text-left">2. 生成可视化图表</h3>
                            <p class="text-gray-600 text-center md:text-left">
                                获取仓库数据后，GitDiagram使用现代可视化库将数据转换为交互式图表。
                            </p>
                        </div>
                        <div class="md:w-2/3">
                            <div class="code-block">
                                <span class="language-label">TypeScript</span>
                                <pre class="text-gray-300"><code>function generateDiagram(repoStructure: RepoStructure): DiagramData {
  // 将文件节点转换为图表节点
  const nodes = repoStructure.nodes.map(node => ({
    id: node.path,
    label: node.name,
    type: node.type,
    size: calculateNodeSize(node)
  }));
  
  // 将依赖关系转换为图表连线
  const edges = repoStructure.edges.map(edge => ({
    source: edge.from,
    target: edge.to,
    weight: edge.importance
  }));
  
  return { nodes, edges };
}</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Step 3 -->
                <div class="mb-8">
                    <div class="flex flex-col md:flex-row gap-8 items-center">
                        <div class="md:w-1/3">
                            <div class="feature-icon bg-primary bg-opacity-10 text-primary mx-auto md:mx-0">
                                <i class="fas fa-mouse-pointer text-2xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold mb-3 text-center md:text-left">3. 实现交互功能</h3>
                            <p class="text-gray-600 text-center md:text-left">
                                GitDiagram的交互功能基于Web技术实现，包括缩放、平移、节点展开/折叠等操作。
                            </p>
                        </div>
                        <div class="md:w-2/3">
                            <div class="code-block">
                                <span class="language-label">TypeScript</span>
                                <pre class="text-gray-300"><code>function setupInteractions(diagram: DiagramInstance): void {
  // 缩放功能
  diagram.on('wheel', (event) => {
    const scale = event.deltaY > 0 ? 0.9 : 1.1;
    diagram.zoom(scale, { x: event.clientX, y: event.clientY });
  });
  
  // 节点点击展开/折叠
  diagram.on('nodeClick', (node) => {
    if (node.hasChildren) {
      diagram.toggleNodeExpansion(node.id);
    }
  });
}</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-16 bg-gray-50" id="try-it">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-3xl font-bold mb-12 text-center">三、快速上手GitDiagram</h2>
            
            <div class="max-w-4xl mx-auto">
                <div class="grid md:grid-cols-2 gap-8 mb-12">
                    <!-- Card 1 -->
                    <div class="card bg-white p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-link text-green-600"></i>
                            </div>
                            <h3 class="text-xl font-bold">URL替换技巧</h3>
                        </div>
                        <p class="text-gray-700 mb-4">
                            使用GitDiagram最简单的方法是URL替换。例如，要可视化React仓库，只需将：
                        </p>
                        <div class="bg-gray-100 p-3 rounded-lg mb-4">
                            <code class="text-sm">https://github.com/facebook/react</code>
                        </div>
                        <p class="text-gray-700 mb-4">
                            替换为：
                        </p>
                        <div class="bg-gray-100 p-3 rounded-lg mb-4">
                            <code class="text-sm">https://gitdiagram.com/facebook/react</code>
                        </div>
                        <p class="text-gray-700">
                            这种简单的替换方式使得工具的使用门槛极低，无需安装任何软件。
                        </p>
                    </div>
                    
                    <!-- Card 2 -->
                    <div class="card bg-white p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-key text-blue-600"></i>
                            </div>
                            <h3 class="text-xl font-bold">API密钥的使用</h3>
                        </div>
                        <p class="text-gray-700 mb-4">
                            对于需要更高频率访问或自定义功能的用户，GitDiagram提供了API接口：
                        </p>
                        <div class="code-block">
                            <span class="language-label">TypeScript</span>
                            <pre class="text-gray-300 text-xs"><code>// 使用API密钥初始化GitDiagram客户端
const gitDiagram = new GitDiagramClient({
  apiKey: 'your-api-key-here'
});

// 生成仓库图表
const diagram = await gitDiagram.generateDiagram({
  repo: 'facebook/react',
  depth: 3,
  showDependencies: true
});</code></pre>
                        </div>
                        <p class="text-gray-700 mt-4">
                            API密钥可以在GitDiagram官网注册后获取，免费版每月有1000次调用额度。
                        </p>
                    </div>
                </div>
                
                <!-- Private Repo Access -->
                <div class="card bg-white p-8 mb-8">
                    <h3 class="text-2xl font-bold mb-6 flex items-center">
                        <i class="fas fa-lock text-primary mr-3"></i> 私有仓库的访问设置
                    </h3>
                    <p class="text-gray-700 mb-6">
                        访问私有仓库需要额外的授权步骤：
                    </p>
                    <ol class="list-decimal pl-6 mb-6 space-y-3 text-gray-700">
                        <li>在GitHub生成个人访问令牌(PAT)</li>
                        <li>在GitDiagram设置中绑定该令牌</li>
                        <li>授权GitDiagram访问指定的私有仓库</li>
                    </ol>
                    <div class="code-block">
                        <span class="language-label">TypeScript</span>
                        <pre class="text-gray-300"><code>// 配置私有仓库访问
gitDiagram.configurePrivateAccess({
  githubToken: 'your-github-pat',
  allowedRepos: ['myorg/private-repo']
});</code></pre>
                    </div>
                </div>
                
                <!-- Troubleshooting -->
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-question-circle text-blue-600 mr-2"></i> 常见问题排解
                    </h3>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="bg-white p-4 rounded-lg shadow-sm">
                            <p class="font-semibold text-gray-800 mb-2">图表加载失败</p>
                            <p class="text-gray-600 text-sm">检查网络连接和仓库URL是否正确</p>
                        </div>
                        <div class="bg-white p-4 rounded-lg shadow-sm">
                            <p class="font-semibold text-gray-800 mb-2">私有仓库无法访问</p>
                            <p class="text-gray-600 text-sm">确认PAT权限是否足够，且未过期</p>
                        </div>
                        <div class="bg-white p-4 rounded-lg shadow-sm">
                            <p class="font-semibold text-gray-800 mb-2">图表过于复杂</p>
                            <p class="text-gray-600 text-sm">尝试减小深度参数，或使用过滤功能</p>
                        </div>
                        <div class="bg-white p-4 rounded-lg shadow-sm">
                            <p class="font-semibold text-gray-800 mb-2">性能问题</p>
                            <p class="text-gray-600 text-sm">大型仓库建议使用API并限制分析深度</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-3xl font-bold mb-12 text-center">四、GitDiagram的高级应用场景</h2>
            
            <div class="max-w-6xl mx-auto">
                <div class="grid md:grid-cols-2 gap-8 mb-12">
                    <!-- Use Case 1 -->
                    <div class="card bg-white p-6 border border-gray-200">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-users text-purple-600 text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold">团队协作中的项目结构展示</h3>
                        </div>
                        <p class="text-gray-700 mb-4">
                            在团队协作中，GitDiagram可以作为新成员入职的辅助工具。通过生成的可视化图表，新成员可以快速了解项目结构，减少适应期：
                        </p>
                        <div class="code-block">
                            <span class="language-label">TypeScript</span>
                            <pre class="text-gray-300 text-xs"><code>// 为新团队成员生成简化版项目图
const onboardingDiagram = await gitDiagram.generateDiagram({
  repo: 'company/project',
  highlightCoreModules: true,
  simplifyLevel: 'medium'
});</code></pre>
                        </div>
                    </div>
                    
                    <!-- Use Case 2 -->
                    <div class="card bg-white p-6 border border-gray-200">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-book text-yellow-600 text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold">技术文档与教学中的应用</h3>
                        </div>
                        <p class="text-gray-700 mb-4">
                            GitDiagram可以嵌入到技术文档或教学材料中，帮助读者理解项目结构：
                        </p>
                        <div class="code-block">
                            <span class="language-label">HTML</span>
                            <pre class="text-gray-300 text-xs"><code>&lt;!-- 在文档中嵌入交互式图表 --&gt;
&lt;div class="project-structure"&gt;
  &lt;iframe 
    src="https://gitdiagram.com/embed/facebook/react?theme=light" 
    width="100%" 
    height="500px"&gt;
  &lt;/iframe&gt;
&lt;/div&gt;</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <!-- Use Case 3 -->
                    <div class="card bg-white p-6 border border-gray-200">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-hands-helping text-green-600 text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold">开源项目贡献者引导</h3>
                        </div>
                        <p class="text-gray-700 mb-4">
                            对于开源项目维护者，GitDiagram可以帮助潜在贡献者快速理解代码组织：
                        </p>
                        <div class="code-block">
                            <span class="language-label">Markdown</span>
                            <pre class="text-gray-300 text-xs"><code>## 贡献指南

在开始贡献代码前，请先了解我们的项目结构：
[查看项目结构图](https://gitdiagram.com/our-org/project)

主要模块说明：
- `core/`: 核心功能实现
- `plugins/`: 插件系统
- `ui/`: 用户界面组件</code></pre>
                        </div>
                    </div>
                    
                    <!-- Use Case 4 -->
                    <div class="card bg-white p-6 border border-gray-200">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-chart-line text-red-600 text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold">项目架构优化分析</h3>
                        </div>
                        <p class="text-gray-700 mb-4">
                            GitDiagram还可以帮助识别项目中的架构问题，如循环依赖、过度耦合等：
                        </p>
                        <div class="code-block">
                            <span class="language-label">TypeScript</span>
                            <pre class="text-gray-300 text-xs"><code>// 生成架构分析报告
const analysisReport = await gitDiagram.analyzeArchitecture({
  repo: 'our-org/project',
  detectIssues: ['circular-deps', 'high-coupling']
});

console.log(`发现 ${analysisReport.issues.length} 个潜在架构问题`);</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Comparison Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-3xl font-bold mb-12 text-center">五、与其他代码可视化工具的比较</h2>
            
            <div class="max-w-6xl mx-auto">
                <!-- Feature Comparison -->
                <div class="card bg-white p-8 mb-12">
                    <h3 class="text-2xl font-bold mb-6 text-center">1. GitDiagram vs Git2Dot</h3>
                    <p class="text-gray-700 mb-8 text-center">
                        Git2Dot是一个专注于Git提交历史可视化的工具，而GitDiagram更侧重于项目结构：
                    </p>
                    <div class="overflow-x-auto">
                        <table class="comparison-table">
                            <thead>
                                <tr>
                                    <th>特性</th>
                                    <th>GitDiagram</th>
                                    <th>Git2Dot</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>项目结构可视化</td>
                                    <td><i class="fas fa-check check-icon"></i></td>
                                    <td><i class="fas fa-times x-icon"></i></td>
                                </tr>
                                <tr>
                                    <td>提交历史可视化</td>
                                    <td>部分支持</td>
                                    <td><i class="fas fa-check check-icon"></i></td>
                                </tr>
                                <tr>
                                    <td>在线使用</td>
                                    <td><i class="fas fa-check check-icon"></i></td>
                                    <td><i class="fas fa-times x-icon"></i></td>
                                </tr>
                                <tr>
                                    <td>自定义导出</td>
                                    <td><i class="fas fa-check check-icon"></i></td>
                                    <td><i class="fas fa-check check-icon"></i></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- Tools Overview -->
                <div class="card bg-white p-8">
                    <h3 class="text-2xl font-bold mb-8 text-center">4. 各工具的优缺点分析</h3>
                    <div class="overflow-x-auto">
                        <table class="comparison-table">
                            <thead>
                                <tr>
                                    <th>工具</th>
                                    <th>优点</th>
                                    <th>缺点</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>GitDiagram</td>
                                    <td>使用简便、在线访问、项目结构清晰</td>
                                    <td>大型仓库性能较差</td>
                                </tr>
                                <tr>
                                    <td>Git2Dot</td>
                                    <td>提交历史展示详细、自定义选项多</td>
                                    <td>需本地安装、学习曲线陡</td>
                                </tr>
                                <tr>
                                    <td>Visualize-Git-Live</td>
                                    <td>实时更新、交互性强</td>
                                    <td>需本地配置、资源消耗大</td>
                                </tr>
                                <tr>
                                    <td>Git-History-Generator</td>
                                    <td>历史演化动画、教学价值高</td>
                                    <td>配置复杂、生成耗时</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Case Studies Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="section-title text-3xl font-bold mb-12 text-center">六、知名开源项目的可视化展示</h2>
            
            <div class="max-w-4xl mx-auto">
                <!-- FastAPI -->
                <div class="card bg-white p-8 mb-8 border border-gray-200">
                    <div class="flex items-center mb-6">
                        <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mr-6">
                            <i class="fab fa-python text-green-600 text-3xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold">1. FastAPI项目结构可视化</h3>
                    </div>
                    <p class="text-gray-700 mb-6">
                        FastAPI是一个现代化的Python Web框架，其项目结构通过GitDiagram可视化后，清晰展示了核心模块间的关系：
                    </p>
                    <div class="code-block">
                        <span class="language-label">文件结构</span>
                        <pre class="text-gray-300"><code>fastapi/
├── applications.py      // 应用程序类定义
├── routing.py           // 路由处理
├── params.py            // 参数处理
├── dependencies.py      // 依赖注入系统
└── middleware/          // 中间件组件</code></pre>
                    </div>
                    <p class="text-gray-700 mt-6">
                        通过GitDiagram可视化，我们可以直观看到FastAPI的依赖注入系统是如何与路由和参数处理模块交互的。
                    </p>
                </div>
                
                <!-- Streamlit -->
                <div class="card bg-white p-8 mb-8 border border-gray-200">
                    <div class="flex items-center mb-6">
                        <div class="w-16 h-16 bg-red-100 rounded-lg flex items-center justify-center mr-6">
                            <i class="fab fa-python text-red-600 text-3xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold">2. Streamlit代码组织解析</h3>
                    </div>
                    <p class="text-gray-700 mb-6">
                        Streamlit是一个用于数据应用的Python框架，其代码组织反映了其设计理念：
                    </p>
                    <div class="code-block">
                        <span class="language-label">文件结构</span>
                        <pre class="text-gray-300"><code>streamlit/
├── elements/           // UI元素定义
├── delta_generator.py  // 核心渲染引擎
├── state/              // 状态管理
└── caching/            // 缓存机制</code></pre>
                    </div>
                    <p class="text-gray-700 mt-6">
                        GitDiagram展示了Streamlit如何将前端元素与后端状态管理分离，同时通过delta_generator实现高效更新。
                    </p>
                </div>
                
                <!-- Insights -->
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-8">
                    <h3 class="text-2xl font-bold mb-6 flex items-center">
                        <i class="fas fa-brain text-blue-600 mr-3"></i> 4. 从可视化图表中获取的项目设计洞见
                    </h3>
                    <p class="text-gray-700 mb-6">
                        通过分析这些知名项目的可视化图表，我们可以获得一些设计洞见：
                    </p>
                    <ul class="list-disc pl-6 space-y-3 text-gray-700">
                        <li><span class="font-semibold">模块化设计：</span>成功的项目通常具有清晰的模块边界</li>
                        <li><span class="font-semibold">核心抽象：</span>优秀框架往往有少量核心抽象，如Flask的应用上下文</li>
                        <li><span class="font-semibold">依赖方向：</span>依赖关系通常是单向的，避免循环依赖</li>
                        <li><span class="font-semibold">分层架构：</span>大多数项目采用分层设计，如UI层、业务逻辑层、数据访问层</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Interactive Diagram Section -->
    <section class="py-16 bg-gray-900 text-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-3xl font-bold mb-6">体验GitDiagram的强大功能</h2>
                <p class="text-xl mb-10 text-gray-300">
                    下面是一个交互式的项目结构图示例，展示了GitDiagram如何可视化一个典型的前端项目
                </p>
                <div class="mermaid bg-gray-800 rounded-xl p-8 min-h-[400px] flex items-center justify-center">
                    graph TD
                        A[项目根目录] --> B[src]
                        A --> C[public]
                        A --> D[config]
                        B --> E[components]
                        B --> F[pages]
                        B --> G[services]
                        B --> H[store]
                        E --> I[Header]
                        E --> J[Footer]
                        E --> K[Button]
                        F --> L[Home]
                        F --> M[About]
                        F --> N[Contact]
                        G --> O[api.js]
                        G --> P[auth.js]
                        H --> Q[actions.js]
                        H --> R[reducers.js]
                        C --> S[index.html]
                        C --> T[assets]
                        D --> U[webpack.config.js]
                        D --> V[babel.config.js]
                </div>
                <div class="mt-8">
                    <a href="https://gitdiagram.com" class="inline-block px-8 py-3 bg-primary rounded-lg font-semibold hover:bg-secondary transition duration-300">
                        立即尝试 <i class="fas fa-external-link-alt ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'dark',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            themeVariables: {
                primaryColor: '#4361ee',
                primaryBorderColor: '#3f37c9',
                primaryTextColor: '#ffffff',
                lineColor: '#8d99ae'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        
        // 卡片悬停效果增强
        const cards = document.querySelectorAll('.card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.12)';
            });
            card.addEventListener('mouseleave', () => {
                card.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.05)';
            });
        });
    </script>
</body>
</html>
```